import React from 'react';
import {
  Box,
  TextField,
  Button,
  DialogTitle,
  DialogContent,
  DialogActions,
  Dialog,
} from '@mui/material';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

interface MovieFormProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (e: React.FormEvent) => void;
  movieData: {
    title: string;
    description: string;
    totalTickets: string;
    price: string;
    showtime: Date | null;
  };
  setMovieData: React.Dispatch<React.SetStateAction<{
    title: string;
    description: string;
    totalTickets: string;
    price: string;
    showtime: Date | null;
  }>>;
  isEdit: boolean;
}

const MovieForm: React.FC<MovieFormProps> = ({
  open,
  onClose,
  onSubmit,
  movieData,
  setMovieData,
  isEdit,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          background: 'linear-gradient(135deg, #2c3e50 0%, #3498db 100%)',
          color: 'white',
          borderRadius: '16px',
        }
      }}
    >
      <DialogTitle sx={{
        borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        background: 'rgba(0, 0, 0, 0.2)'
      }}>
        {isEdit ? '编辑电影' : '添加新电影'}
      </DialogTitle>
      <DialogContent sx={{ mt: 2 }}>            
        <Box component="form" onSubmit={onSubmit} noValidate sx={{
          '& .MuiTextField-root': {
            '& .MuiOutlinedInput-root': {
              color: 'white',
              '& fieldset': {
                borderColor: 'rgba(255, 255, 255, 0.23)',
              },
              '&:hover fieldset': {
                borderColor: 'rgba(255, 255, 255, 0.5)',
              },
              '&.Mui-focused fieldset': {
                borderColor: '#1976d2',
              },
            },
            '& .MuiInputLabel-root': {
              color: 'rgba(255, 255, 255, 0.7)',
            },
          },
        }}>
          <TextField
            margin="normal"
            required
            fullWidth
            label="电影名称"
            value={movieData.title}
            onChange={(e) => setMovieData({ ...movieData, title: e.target.value })}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            multiline
            rows={4}
            label="电影描述"
            value={movieData.description}
            onChange={(e) => setMovieData({ ...movieData, description: e.target.value })}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            type="number"
            label="总票数"
            value={movieData.totalTickets}
            onChange={(e) => setMovieData({ ...movieData, totalTickets: e.target.value })}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            type="number"
            label="票价"
            value={movieData.price}
            onChange={(e) => setMovieData({ ...movieData, price: e.target.value })}
          />
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DateTimePicker
              label="放映时间"
              value={movieData.showtime}
              onChange={(newValue) => setMovieData({ ...movieData, showtime: newValue })}
              sx={{ mt: 2, width: '100%' }}
            />
          </LocalizationProvider>
        </Box>
      </DialogContent>
      <DialogActions sx={{
        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
        background: 'rgba(0, 0, 0, 0.3)',
        position: 'relative',
        zIndex: 1,
        p: 2
      }}>
        <Button
          onClick={onClose}
          sx={{
            color: 'rgba(255, 255, 255, 0.7)',
            '&:hover': { color: 'white' }
          }}
        >
          取消
        </Button>
        <Button
          onClick={onSubmit}
          variant="contained"
          sx={{
            background: 'linear-gradient(45deg, #ff6b6b 30%, #ff8e53 90%)',
            fontWeight: 'bold',
            '&:hover': {
              background: 'linear-gradient(45deg, #ff8e53 30%, #ff6b6b 90%)'
            }
          }}
        >
          确认
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default MovieForm;